<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>报表统计</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="./js/main.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
    <script src="./js/jQuery.main.js"></script>
    <script src="./layui/layui.js" charset="utf-8"></script>
    <script src="./js/echarts.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js " charset="utf-8"></script>-->

</head>
<style>


    .layui-panel:hover{
        cursor: pointer;
    }

</style>

<body>

<div class="layui-row layui-col-space15" style="margin-bottom: 15px;width: 1350px;">
    <div class="layui-col-md4">
        <div id="userAmount" class="layui-panel layui-bg-blue" style="border-radius: 10px 10px 10px 10px">
<!--        <div id="userAmount" class="layui-panel layui-bg-blue" style="border-radius: 10px 10px 10px 10px" onmouseover="addDiv('userAmount')">-->
            <div style="padding: 30px;">
                <b style="font-size: 17px;color: #FBFBFB"><i class="layui-icon" style="font-size: 20px;">&#xe613;</i>     活跃数   USER AMOUNT</b>
                <div style="float: right;"><b id="userNum" style="font-size: 20px;color: #FBFBFB"></b></div>
            </div>
        </div>
    </div>

    <div class="layui-col-md4">
<!--        <div id="importAmount" class="layui-panel" style="border-radius: 10px 10px 10px 10px;background-color: #FFB800" onmouseover="addDiv('importAmount')">-->
        <div id="importAmount" class="layui-panel" style="border-radius: 10px 10px 10px 10px;background-color: #FFB800" >
            <div style="padding: 30px;">
                <b style="font-size: 17px;color: #FBFBFB"><i class="layui-icon" style="font-size: 20px;">&#xe609;</i>     导入量  IMPORT AMOUNT</b>
                <div style="float: right;"><b id="import" style="font-size: 20px;color: #FBFBFB"></b></div>
            </div>
        </div>
    </div>

    <div class="layui-col-md4">
<!--        <div id="uploadAmount" class="layui-panel" style="border-radius: 10px 10px 10px 10px;background-color: #FF5722" onmouseover="addDiv('uploadAmount')">-->
        <div id="uploadAmount" class="layui-panel" style="border-radius: 10px 10px 10px 10px;background-color: #FF5722">
            <div style="padding: 30px;">
                <b style="font-size: 17px;color: #FBFBFB"><i class="layui-icon" style="font-size: 20px;">&#xe67d;</i>     导出量  EXPORT AMOUNT</b>
                <div style="float: right;"><b id="upload" style="font-size: 20px;color: #FBFBFB"></b></div>
            </div>
        </div>
    </div>

</div>

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div class="layui-row layui-col-space" style="margin-top: 15px;">
    <div class="layui-col-md4" id="user" style="width: 570px;height:375px;background-color: #FBFBFB">

    </div>
    <div class="layui-col-md4" id="dept" style="width: 570px;height:375px;background-color: #FBFBFB">

    </div>
    <div class="layui-col-md4" id="product" style="width: 570px;height:375px;background-color: #FBFBFB">

    </div>
</div>

<div class="layui-tab">
    <ul class="layui-tab-title">
        <li value="1" class="layui-this" id="qid" disabled="disabled"><b>汽电</b></li>
        <li value="2" disabled="disabled"><b>通信</b></li>
        <li value="3" ><b>电感</b></li>
    </ul>
    <div class="layui-tab-content" style="background-image: url('./img/deptChart.png');width: auto;height: 700px">
        <div class="layui-tab-item layui-show">
            <b style="color: #FBFBFB;font-size: 20px">产品统计</b>
            <div  id="qidian" style="width: 600px;height: 400px"></div>
        </div>
        <div class="layui-tab-item" id="tongxin"><b style="color: #FBFBFB">产品统计</b></div>
        <div class="layui-tab-item" id="diangan"><b style="color: #FBFBFB">产品统计</b></div>
    </div>
</div>


<script type="text/javascript">

    //数字自增到某一值动画参数（目标元素,自定义配置）
    function NumAutoPlusAnimation(targetEle, options) {
        /*可以自己改造下传入的参数，按照自己的需求和喜好封装该函数*/
        //不传配置就把它绑定在相应html元素的data-xxxx属性上吧
        options = options || {};

        var $this = document.getElementById(targetEle),
            time = options.time || $this.data('time'), //总时间--毫秒为单位
            finalNum = options.num || $this.data('value'), //要显示的真实数值
            regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度
            step = finalNum / (time / regulator),/*每30ms增加的数值--*/
            count = 0, //计数器
            initial = 0;

        var timer = setInterval(function() {
            count = count + step;
            if(count >= finalNum) {
                clearInterval(timer);
                count = finalNum;
            }
            //t未发生改变的话就直接返回
            //避免调用text函数，提高DOM性能
            var t = Math.floor(count);
            if(t == initial) return;
            initial = t;
            $this.innerHTML = initial;
        }, 30);
    }
    //数据展示动画
    NumAutoPlusAnimation("userNum", {
        time: 1500,
        num: 3521,
        regulator: 25
    })
    NumAutoPlusAnimation("import", {
        time: 1500,
        num: 8451,
        regulator: 25
    })
    NumAutoPlusAnimation("upload", {
        time: 1500,
        num: 2512,
        regulator: 25
    })

    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });

    // 基于准备好的dom，初始化echarts实例
    var userChart = echarts.init(document.getElementById('user'));
    var deptChart = echarts.init(document.getElementById('dept'));
    var  productChart= echarts.init(document.getElementById('product'));
    var  qidianChart= echarts.init(document.getElementById('qidian'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '各部门工单统计'
        },
        tooltip: {},
        legend: {
            data: ['部门']
        },
        xAxis: {
            data: ['汽车电子事业部','通信事业部','电感事业部','其他']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10]
            }
        ],
        animationDuration: 1500,
        animationEasing: "cubicInOut",
    };
    var option2 = {
        title: {
            // text: '各部门工单统计'
        },
        tooltip: {},
        legend: {
            data: ['部门']
        },
        xAxis: {
            data: ['汽车电子事业部','通信事业部','电感事业部','其他']
        },
        yAxis: {
            type: 'value'
        },color: '#FD482C',
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10]
            }
        ],
        animationDuration: 1500,
        animationEasing: "cubicInOut",
    };
    var optionchartDept = {
        title: {
            text: '七日工单统计'
        },
        tooltip: {},
        legend: { //顶部显示 与series中的数据类型的name一致
            data: ['汽电', '通信', '电感', '其他']
        },
        xAxis: {
            // type: 'category',
            // boundaryGap: false, //从起点开始
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '汽电',
            type: 'line', //线性
            data: [145, 230, 701, 734, 1090, 1130, 1120],
        }, {
            name: '通信',
            type: 'line', //线性
            data: [720, 832, 801, 834, 1190, 1230, 1220],
        }, {
            smooth: true, //曲线 默认折线
            name: '电感',
            type: 'line', //线性
            data: [820, 932, 901, 934, 1290, 1330, 1320],
        }, {
            smooth: true, //曲线
            name: '其他',
            type: 'line', //线性
            data: [220, 332, 401, 534, 690, 730, 820],
        }],
        animationDuration: 1500,
        animationEasing: "cubicInOut",
    };

    var optionchartProduct = {
        title: {
            text: '良率统计',
            subtext: '纯属虚构', //副标题
            x: 'center' //标题居中
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        tooltip: {
            // trigger: 'item' //悬浮显示对比
        },
        legend: {
            orient: 'vertical', //类型垂直,默认水平
            left: 'left', //类型区分在左 默认居中
            data: ['良品', '不良品', '缺数']
        },
        color:['#5FB878','#FF5722','#FFB800'],
        series: [{
            type: 'pie', //饼状
            radius: '60%', //圆的大小
            center: ['50%', '50%'], //居中
            data: [{
                value: 300,
                name: '良品',
            },
                {
                    value: 50,
                    name: '不良品',
                },
                {
                    value: 50,
                    name: '缺数',
                }
            ]
        }],
        animationDuration: 1500,
        animationEasing: "cubicInOut",
    };
    // 使用刚指定的配置项和数据显示图表。
    userChart.setOption(option);
    qidianChart.setOption(option2);
    deptChart.setOption(optionchartDept);
    productChart.setOption(optionchartProduct);

</script>
</body>


</html>